<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>我的</title>
	<link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../style/common.css">
	<link rel="stylesheet" href="../../style/home/article.css">
	<link rel="stylesheet" href="../../style/user/personal.css">
	<link rel="stylesheet" href="../../style/problem/problem.css">
	<script src="../../libs/jquery-3.2.1.min.js"></script>


	<!--<script src="../../jsc/UE/third-party/zeroclipboard/ZeroClipboard.js"></script>-->

	<script src="../../libs/vue.js"></script>

	<!--<script src="../../jsc/axios.min.js"></script>-->
	<script src="../../jsc/axios.min.js"></script>
<!-- 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
			integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
			crossorigin="anonymous"></script> -->
	<script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
	<script src="../../libs/layer-v3.1.1/laydate/laydate.js"></script>
	<script src="https://echarts.baidu.com/build/dist/echarts.js"></script>

	<!--<script src="https://cdn.bootcss.com/require.js/2.3.6/require.js"></script>-->


	<script src="../../jsc/UE/ueditor.config.js"></script>
	<script src="../../jsc/UE/ueditor.all.js"></script>
	<script src="../../jsc/UE/ueditor.parse.js"></script>
	<script src="https://echarts.baidu.com/build/dist/echarts.js"></script>

	<!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app" v-cloak>
	<header-component @changeflag="changeflag"></header-component>
	<navinner-component></navinner-component>

	<!-- 主站导航 -->
	<navrow-component></navrow-component>

	<main>
		<div class="content">
			<div class="user">
				<div class="user-option-box">
					<div class="user-data">
						<!--<div class="user-head" style="background: url(../../static/icons/头像就.png) no-repeat;background-size: contain"></div>-->
						<div class="user-head">
							<img :src="user.avatar_text" alt="" style="object-fit: cover;" width="100%" height="100%">
						</div>
						<div class="user-info">
							<div class="user-name">{{ user.nickname }}</div>
							<!-- check 0=待审核,1=审核通过,2=未通过,3=未提交 -->
							<div class="user-label" v-if="user.check==0">待审核</div>
							<div class="user-label" v-if="user.check==1">{{ user.is_siter==1?"审核站长":"审核通过" }}</div>
							<div class="user-label" v-if="user.check==2">未通过审核</div>
							<div class="user-label" v-if="user.check==3">未认证</div>
						</div>
					</div>
					<div class="accordion" id="accordionExample">
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=1 ,'btn btn-link':actives==1}"
											@click="changeTabs(1,'个人资料')" type="button">个人资料
									</button>
								</h5>
							</div>

							<div class="inner-box-hide">
								<div class="card-body" style="padding: 0"></div>
							</div>
						</div>
						<div class="card" style="display: none">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=2 ,'btn btn-link':actives==2}"
											@click="changeTabs(2,'我的发布')" type="button">我的发布
									</button>
								</h5>
							</div>
							<div class="inner-box-hide">
								<div class="card-body" style="padding: 0">
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=3 ,'btn btn-link':actives==3}"
											@click="changeTabs(3,'用户认证')">用户认证
									</button>
								</h5>
							</div>
							<div :class="{'inner-box-hide':actives!=3 ,'inner-box':actives==3}">
								<div class="card-body">
									<div :class="{'card-item':active!=1 ,'card-item active':active==1}"
										 @click="changeTab(1,'站长认证')" v-if="user.is_siter==1">站长认证
									</div>
									<div :class="{'card-item':active!=2 ,'card-item active':active==2}"
										 @click="changeTab(2,'房产认证')" v-if="user.is_siter==0">房产认证
									</div>
								</div>
							</div>
						</div>
						<div class="card">
							<div class="card-header" id="headingFour">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=4 ,'btn btn-link':actives==4}"
											@click="changeTabs(4,'安全设置')">安全设置
									</button>
								</h5>
							</div>
							<div :class="{'inner-box-hide':actives!=4 ,'inner-box':actives==4}">
								<div class="card-body">
									<div :class="{'card-item':active!=4 ,'card-item active':active==4}"
										 @click="changeTab(4,'修改手机号')">修改手机号
									</div>
									<div :class="{'card-item':active!=5 ,'card-item active':active==5}"
										 @click="changeTab(5,'修改密码')">修改密码
									</div>
								</div>
							</div>
						</div>
						<!-- 以下站长才会显示 -->
						<div class="card" v-if="user.checkdata==1">
							<div class="card-header" id="headingFive">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=5 ,'btn btn-link':actives==5}"
											@click="changeTabs(5,'卜咚问答')">卜咚问答
									</button>
								</h5>
							</div>
							<div :class="{'inner-box-hide':actives!=5 ,'inner-box':actives==5}">
								<div class="card-body">
									<div :class="{'card-item':active!=6 ,'card-item active':active==6}"
										 @click="changeTab(6,'我的提问')">我的提问
									</div>
								</div>
							</div>
						</div>
						<!-- 文章管理 认证站长 -->
						<div class="card" v-if="user.checkdata==1 && user.is_siter==1">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=6 ,'btn btn-link':actives==6}"
											@click="changeTabs(6,'文章管理')" type="button">文章管理
									</button>
								</h5>
							</div>

							<div class="inner-box-hide">
								<div class="card-body" style="padding: 0"></div>
							</div>
						</div>
						<!-- 我的文章 -->
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=7 ,'btn btn-link':actives==7}"
											@click="changeTabs(7,'我的文章')" type="button">我的文章
									</button>
								</h5>
							</div>

							<div :class="{'inner-box-hide':actives!=7 ,'inner-box':actives==7}">
								<div class="card-body">
									<div :class="{'card-item':active!=7 ,'card-item active':active==7}"
										 v-if="user.checkdata==1" @click="changeTab(7,'文章列表')">文章列表
									</div>
									<div :class="{'card-item':active!=8 ,'card-item active':active==8}"
										 v-if="user.checkdata==1" @click="changeTab(8,'发布文章')">发布文章
									</div>
									<div :class="{'card-item':active!=9 ,'card-item active':active==9}"
										 @click="changeTab(9,'收藏文章')">收藏文章
									</div>
								</div>
							</div>
						</div>
						<!-- 浏览历史 -->
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=8 ,'btn btn-link':actives==8}"
											@click="changeTabs(8,'浏览历史')" type="button">浏览历史
									</button>
								</h5>
							</div>

							<div class="inner-box-hide">
								<div class="card-body" style="padding: 0"></div>
							</div>
						</div>
						<!-- 投票评议 -->
						<div class="card" v-if="user.group_id!=1&&user.group_id!=2">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=9 ,'btn btn-link':actives==9}"
											@click="changeTabs(9,'投票评议')" type="button">投票评议
									</button>
								</h5>
							</div>

							<div :class="{'inner-box-hide':actives!=9 ,'inner-box':actives==9}">
								<div class="card-body">
									<div :class="{'card-item':active!=10 ,'card-item active':active==10}"
										 @click="changeTab(10,'人员选举')">人员选举
									</div>
									<div :class="{'card-item':active!=11 ,'card-item active':active==11}"
										 @click="changeTab(11,'活动投票')">活动投票
									</div>
								</div>
							</div>
						</div>
						<!-- 事件评议 -->
						<div class="card" v-if="user.group_id!=1&&user.group_id!=2">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=10 ,'btn btn-link':actives==10}"
											@click="changeTabs(10,'事件评议')" type="button">事件评议
									</button>
								</h5>
							</div>

							<div class="inner-box-hide">
								<div class="card-body" style="padding: 0"></div>
							</div>
						</div>
						
						<!-- 注销 -->
						<div class="card">
							<div class="card-header">
								<h5 class="mb-0">
									<button :class="{'btn btn-link collapsed':actives!=17 ,'btn btn-link':actives==17}"
											@click="changeTabs(17)" type="button">注销账号
									</button>
								</h5>
							</div>
						
							<div class="inner-box-hide">
								<div class="card-body" style="padding: 0"></div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="user-info-box">
					<div class="user-info-head">首页> <span>{{ first_txt }}</span><span v-if="sec_txt">>{{ sec_txt }}</span></div>
					<component :is="flag"
							   :roomid="id"
							   :needclear = 'needclear'
							   :articleid="articleid"
							   @articleedit="articleedit"
							   @changetab="changeTab"
							   @changetel="changeTab"
							   @changepwd="changeTab"
							   @roomedit="roomedit"
							   @updateinfo="updateinfo"
					>
					</component>


					<div class="user-info-body Problem hide">
						<div class="user-info-title">我的提问</div>
						<div class="problem-box">
							<div class="problem-search-item">
								<div class="problem-search-item-title">成都怎么办电子狗？</div>
								<div class="problem-search-item-prop">
									<span>一品CG：6-1608业主</span>
									<span>发布于：2018-07-09 10:00</span>
								</div>
								<div class="problem-search-item-text">
									王倩告诉记者，她在与店方理论时被人拍了视频，并在网上发布，她对此并不知情。“但从有人把视频没有打马赛克发在网上的那一刻起，这个
									事情就没有回旋的余地了。”
								</div>
								<div class="problem-search-item-option">
									<span>3人回复</span>
									<span>23次浏览</span>
									<span onclick="showTab(this)">回复</span>
								</div>
							</div>
							<div class="problem-search-item">
								<div class="problem-search-item-title">成都怎么办电子狗？</div>
								<div class="problem-search-item-prop">
									<span>一品CG：6-1608业主</span>
									<span>发布于：2018-07-09 10:00</span>
								</div>
								<div class="problem-search-item-text">
									王倩告诉记者，她在与店方理论时被人拍了视频，并在网上发布，她对此并不知情。“但从有人把视频没有打马赛克发在网上的那一刻起，这个
									事情就没有回旋的余地了。”
								</div>
								<div class="problem-search-item-option">
									<span>3人回复</span>
									<span>23次浏览</span>
									<span onclick="showTab(this)">回复</span>
								</div>
							</div>
							<div class="problem-search-item">
								<div class="problem-search-item-title">成都怎么办电子狗？</div>
								<div class="problem-search-item-prop">
									<span>一品CG：6-1608业主</span>
									<span>发布于：2018-07-09 10:00</span>
								</div>
								<div class="problem-search-item-text">
									王倩告诉记者，她在与店方理论时被人拍了视频，并在网上发布，她对此并不知情。“但从有人把视频没有打马赛克发在网上的那一刻起，这个
									事情就没有回旋的余地了。”
								</div>
								<div class="problem-search-item-option">
									<span>3人回复</span>
									<span>23次浏览</span>
									<span onclick="showTab(this)">回复</span>
								</div>
							</div>
						</div>
					</div>
					<div class="user-info-body modify-mobile hide">
						<div class="user-info-title" style="margin-bottom: 3rem">修改手机号</div>
						<div class="register-input-box">
							<div class="register-input-item">
								<div class="register-input-name">
									<img src="../../static/icons/手机1.png" alt="">手机号
								</div>
								<input type="text" placeholder="请输入11位手机号">
							</div>
						</div>
						<div class="register-input-box">
							<div class="register-input-item" style="width: 31.75rem">
								<div class="register-input-name">
									<img src="../../static/icons/验证码.png" alt="">验证码
								</div>
								<input type="text" placeholder="请输入验证码">
							</div>
							<a href="" class="verify">获取验证码</a>
						</div>
						<div class="register-input-box">
							<div class="register-input-item">
								<div class="register-input-name">
									<img src="../../static/icons/手机1.png" alt="">手机号
								</div>
								<input type="text" placeholder="请输入您现在新的手机号码">
							</div>
						</div>
						<div class="register-input-box" style="padding-top: 1rem">
							<div class="register-btn" onclick="sub_info()">提交</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
	<footer-component></footer-component>
</div>
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-body">
				<img src="" alt="" class="modal-img">
			</div>
		</div>
	</div>
</div>

<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>

<script>

	function showImg(obj) {
		var src = obj.src || obj;
		$(".modal-img").attr("src", src);
		$('#myModal3').modal('show').on('shown.bs.modal', function (e) {
			//             $(".modal-img").attr("src",src);
		});
	}

	function sub_info() {
		window.location.href = '../../views/login/register-success2.html';
	}

	new Vue({
		el: "#app",
		data: {
			parameter: parameter,

			detail: {},
			flag: 'userinfo-component',
			// flag:'history-component',
			active: 0,
			actives: 1,
			id: '',
			articleid: '',
			user: '',
			sitelevel: '',
			first_type: 1,
			sec_type : 1,
			first_txt : '个人资料',
			sec_txt : '用户认证',
			needclear : '' //是否清空发布文章表单

		},
		mounted() {
			var _th = this;
			if (localStorage.getItem('station')) {
				this.sitelevel = JSON.parse(localStorage.getItem('station')).level;
			}
			this.getuserinfo();
			if (location.hash == '#history') {
				this.actives = 8;
				this.flag = 'history-component';
			}
			if (this.parameter.tab1 && this.parameter.tab2) {
				if (this.parameter.type == 'user') {
					this.changeTabs(parseInt(this.parameter.tab1));
					this.changeTab(parseInt(this.parameter.tab2));
				} else if (this.parameter.type == 'station') {
					this.changeTabs(parseInt(this.parameter.tab1));
					this.changeTab(1);
				}
			}
		},
		filters: {},
		methods: {
			changeflag() {
				this.actives = 8;
				this.flag = 'history-component';
			},
			loginOut: function () {
				//退出登录
				layer.confirm("确定退出登录？", {btn: ["确定", "取消"]}, function () {
					delCookie("token");
					window.location.href = "login.html";
				}, function (index) {
					layer.close(index);
				});
			},
			changepwd() {
				this.flag = 'changepassword-component';
			},
			changetel() {
				this.flag = 'changemobile-component';
			},
			roomedit: function (id) {
				this.id = id;
				console.log(id, '父级组件');
				this.changeTab(3);
			},
			// 编辑文章
			articleedit: function (id) {
				this.articleid =id;
				this.changeTab(8);
			},
			changeTab: function (type,txt) {
				// 切换二级导航
				this.active = type;
				this.sec_txt = txt;
				this.needclear = '';
				if (type === 1) {
					this.flag = "station-component";
				} else if (type === 2) {
					this.flag = "house-component";
				} else if (type === 3) {
					this.active = 2;
					this.flag = "houseadd-component";
				} else if (type === 4) {
					this.flag = "changemobile-component";
				} else if (type === 5) {
					this.flag = "changepassword-component";
				} else if (type === 6) {
					this.flag = "ask-component";
				} else if (type === 7) {
					this.flag = "article-component";
				} else if (type === 8) {
					if (txt){
						this.needclear = 'true'
					}
					// 发布文章时清空发布文章的数据
					this.flag = "editarticle-component";
				} else if (type === 9) {
					this.flag = "collectarticle-component";
				} else if (type === 10) {
					this.flag = "vote-component";
				} else if (type === 11) {
					this.flag = "support-component";
				} else if (type === 12) {
					this.active = 10;
					this.flag = "personnel-component";
				} else if (type === 13) {
					this.active = 10;
					this.flag = "addperson-component";
				} else if (type === 14) {
					this.active = 10;
					this.flag = "newvote-component";
				} else if (type === 15) {
					this.active = 11;
					this.flag = "newactivity-component";
				} else if (type === 16) {
					this.flag = "newappraise-component";
				}
				
			},
			changeTabs: function (type,txt) {
				//this.active = 0;
				// 切换一级导航
				this.first_txt = txt;
				this.sec_txt = '';
				console.log('一级切换');
				if (this.actives === type) {
					// this.actives = 0;
				} else {
					this.actives = type;
					this.first_type = type;
				}
				if (type === 1) {
					this.flag = "userinfo-component";
				}
				if (type === 6) {
					this.flag = "article-component";
				}
				if (type === 8) {
					this.flag = "history-component";
				}
				if (type === 10) {
					this.flag = "appraise-component";
				}
				else if (type === 17) {
					layer.confirm('确定注销此账号？',function(){
						let form = new FormData()
						form.append('token',getCookie('token'))
						axios.post(sysurl + 'user/quit', form).then(res => {
							delCookie("token");
							delCookie("user_id");
							window.location.href = tmpsUrls + "www/views/login/login.html";
						});
						
					})
				}
			},
			getuserinfo() {
				let d = new FormData();
				d.append('user_id', getCookie('user_id'));
				d.append('token', getCookie('token'));
				axios.post(sysurl + 'user/info', d).then(res => {
					console.log(res.data.data.checkdata, res.data.data, '个人信息');
					this.user = res.data.data;
				});
			},
			updateinfo() {
				//子级传来的方法

				this.getuserinfo();
			}
		}
	});


</script>
</body>
</html>
